<template>
  <div>
    <!--系统公告-->
    <div
        style="display: flex;justify-content: space-between;box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
      <div>欢迎您，。</div>
      <div style="">海上生明月，天涯共此时。——唐·张九龄 《望月怀古》</div>
    </div>
    <div style="display:flex;justify-content: right">
      <el-card style="width: 50%;margin-right: 10px">
        <div slot="header" class="clearfix">
          <span>Mapreduce文件上传</span>
        </div>
        <div style="justify-content: center">
          <el-upload
              class="upload-demo"
              drag
              multiple
              :action="uploadAction"
              :http-request="uploadFile"
              :multiple="false"
              :show-file-list="true"
              :on-success="handleUploadSuccess"
          >
            <el-icon class="el-icon--upload">
              <upload-filled/>
            </el-icon>
            <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                请上传源数据文件.txt .csv&nbsp;系统将会自动进行统计气温在25-25摄氏度范围的数据
              </div>
            </template>
          </el-upload>
        </div>
      </el-card>
      <el-card style="width: 50%">
        <div slot="header" class="clearfix">
          <span>MapReduce结果:{{ result }} 所用时间:{{time}}s</span>
        </div>
        <div>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="Date"/>
            <el-table-column prop="temperature" label="Temperature"/>
          </el-table>
        </div>
      </el-card>
    </div>
    <div style="display:flex;margin-top: 10px">
      <el-card style="width: 50%;margin-right: 10px">
        <div slot="header" class="clearfix">
          <span>文件的上传与下载</span>
        </div>
        <div>
        </div>
      </el-card>
      <el-card style="width: 50%">
        <div slot="header" class="clearfix">
          <span>标题</span>
          <div style="margin-top: 20px">
            <el-button type="primary">按钮</el-button>
            <el-button type="success">按钮</el-button>
            <el-button type="warning">按钮</el-button>
            <el-button type="danger">按钮</el-button>
            <el-button type="info">按钮</el-button>
          </div>
        </div>
        <div>
          <!--          <PieChart :chartId="'chart1'"></PieChart>-->
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import {UploadFilled} from "@element-plus/icons-vue";
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const uploadAction = 'http://localhost:8080/upload';
const taskId = ref<string | null>(null);
const result = ref<string | null>("no tasks in progress");
let pollingInterval: number | null = null;
const tableData = ref<any[]>([]);
const time = ref(0);


const uploadFile = async (options: any) => {
  const formData = new FormData();
  formData.append('file', options.file);
  try {
    const response = await axios.post(uploadAction, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    taskId.value = response.data.data;
    startPolling();
  } catch (err) {
    ElMessage({
      message: '文件上传失败:' + err,
      type: 'error',
      center: true
    })
  }
};

function handleUploadSuccess() {
  ElMessage({
    message: `文件上传成功. Task ID: ${taskId.value}`,
    type: 'success',
    center: true
  })
}

const fetchResult = async () => {
  try {
    const response = await axios.post('http://localhost:8080/result', null, {
      params: {
        taskId: taskId.value,
      },
    });
    result.value = response.data.data;
    console.log(response.data.data)
    if (response.data.data != "Task is still in progress.") {
      tableData.value = response.data.data;
      result.value = "Task completed";
      clearInterval(pollingInterval);
      pollingInterval = null;
      ElMessage({
        message: `结果查询成功. Task ID: ${taskId.value}`,
        type: 'success',
        center: true,
        duration: 1200
      })
    }
  } catch (err) {
    ElMessage({
      message: '结果查询失败:' + err,
      type: 'error',
      center: true
    })
    clearInterval(pollingInterval);
    pollingInterval = null;
  }
};

const startPolling = () => {
  if (!taskId.value) {
    alert('Please upload a file first');
    return;
  }
  pollingInterval = setInterval(fetchResult, 10000); // 每5秒轮询一次
  time.value = time.value + 10;
};
</script>

<style scoped>

</style>